import classnames from 'classnames'
import './index.scss'

export type IconType = 'react' | 'ercode' | 'search' | 'warn' |
  'warn2' | 'back' | 'setting' | 'html' | 'html2' | 'like' |
  'home' | 'profile' | 'project' | 'css' | 'css2' | 'css3' | 'css4' | 'wxgzhao' |
  'wxgzhao2' | 'hot' | 'js' | 'menu' | 'wxs' | 'arrow-right' | 'arrow-left' |
  'arrow-up' | 'arrow-down' | 'webpack' | 'vue' | 'redux' | 'event' |
  'antd' | 'loading' | 'fed'

type IconProps = {
  type: IconType,
  spin?: boolean,
  className?: string,
  color?: string,
  style?: Object,
  [key: string]: any
}

const defaultProps: IconProps = {
  type: 'loading',
  spin: false
}

export default function Icon(props = defaultProps) {
  const {type, className, spin, color, style, ...other} = props

  const cls = classnames({
    'icon': true,
    'icon-spin': !!spin || type === 'loading',
    [`icon-${type}`]: true
  }, className)

  const _style = {...style, color}

  return (
    <i className={cls} {...other} style={_style} />
  )
}

export const typeNames: IconType[] = ['react', 'ercode', 'search', 'warn',
  'warn2', 'back', 'setting', 'html', 'html2', 'like',
  'home', 'profile', 'project', 'css', 'css2', 'css3', 'css4', 'wxgzhao',
  'wxgzhao2', 'hot', 'js', 'menu', 'wxs', 'arrow-right', 'arrow-left',
  'arrow-up', 'arrow-down', 'webpack', 'vue', 'redux', 'event',
  'antd', 'loading', 'fed']